<template>
	<view class="index">
		<navBar :userinfo="userInfo"></navBar>
		<view class="topContent">
			<!-- 轮播图 -->
			<view class="banner">
				<swiper class="swiper">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<image class="bannerImg" :src="item.thumb" @click="go(item.target)"></image>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view :class="index == 0 ? 'dot dotActive' : 'dot'" v-for="(item, index) in banner" :key="index"></view>
				</view>
			</view>
			<!-- 轮播图下的功能按钮 -->
			<view class="function">
				<swiper class="functionSwiper">
					<swiper-item class="functionSwiperItem">
						<view class="functionItem" v-for="(item, index) in menuList" @tap="go(item.url)" :key="index">
							<image :src="item.image" class="functionImg"></image>
							<view class="functionName">{{ item.name }}</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="functionDots">
					<view :class="index == 0 ? 'functionDot functionDotActive' : 'functionDot'" v-for="(item, index) in 4" :key="index"></view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="decorateImg">
				<image src="/static/index/decorate_img.png"></image>
			</view>
			<!-- 分类 -->
			<view class="cateContainer">
				<scroll-view scroll-x class="scrollView">
					<view :class="index == landed_cate ? 'cateItem cateActive' : 'cateItem'" v-for="(item, index) in landed.category" :key="index"
					 @click="getData(index)">{{ item.name }}</view>
				</scroll-view>
			</view>
			<view class="main">
				<block v-for="(item,index) in landed.list" :key="index">
					<house-pannel :goods="item" :type="1"></house-pannel>
				</block>
				<view class="more_btn" @click="go('/pages/house_property/newhouse/newhouse?type=1')">
					加载更多
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/house-nav-index/house-nav-bar.vue';
	import housePannel from '@/components/house-pannel/house-pannel.vue';
	export default {
		components: {
			navBar,
			housePannel
		},
		data() {
			return {
				userInfo: null,
				// 轮播图下的功能按钮
				menuList: [{
						name: '地产',
						image: '/static/index/icon_hourse.png',
						url: '/pages/house_property/houseIndex/houseIndex'
					},
					{
						name: '商城',
						image: '/static/index/icon_store.png'
					},
					{
						name: '新闻',
						image: '/static/index/icon_news.png',
						url: '/pages/news/index'
					},
					{
						name: '工程',
						image: '/static/index/icon_project.png'
					},
					{
						name: '投资',
						image: '/static/index/icon_figure.png',
						url: '/pages/finance/index/index'
					},
					{
						name: '教育',
						image: '/static/index/icon_teach.png'
					},
					{
						name: '医疗',
						image: '/static/index/icon_hospital.png'
					},
					{
						name: '酒店',
						image: '/static/index/icon_shop.png'
					},
					{
						name: '餐饮',
						image: '/static/index/icon_meal.png'
					},
					{
						name: '旅游',
						image: '/static/index/icon_meal.png'
					}
				],
				landed: {
					category: [],
					list: []
				},
				banner: []
			};
		},
		onShow() {
			this.getUser();
			this.getData();
		},
		methods: {
			go(url) {
				uni.navigateTo({
					url: url
				});
			},
			async getUser() {
				let authData = uni.getStorageSync('authData');
				if (authData) {
					let res = await this.$request.post('/setting/info');
					if (res.data.code == 10000) {
						this.userInfo = res.data.data.list;
					} else {
						this.userInfo = null;
					}
				} else {
					this.userInfo = null;
				}
			},
			async getData(index = 0) {
				let data = {};
				this.landed_cate = index;
				if(index!= 0){
					data.landed_cate = this.landed['category'][index]['value'];
				}
				let res = await this.$request.post('/home/index',{data});
				if (res.data.code == 10000) {
					this.banner = res.data.data.list.ad;
					this.landed = res.data.data.list.landed;
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.index {}

	.topContent {
		padding: 0 26rpx 20rpx;
		width: 100%;
		font-size: 28rpx;
		background: #fff;
		box-sizing: border-box;
	}

	.banner {
		position: relative;
	}

	.swiper {
		height: 320rpx;
	}

	.bannerImg {
		width: 100%;
		height: 100%;
		border-radius: 4rpx;
	}

	/* 指示点 */
	.dots {
		position: absolute;
		display: flex;
		width: 100%;
		left: 0;
		bottom: 10rpx;
		justify-content: center;
	}

	.functionDots {
		display: flex;
		margin-top: 20rpx;
		justify-content: center;
		align-items: center;
	}

	.dot,
	.functionDot {
		margin-right: 20rpx;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.dot {
		background: #ff8f8f;
	}

	.functionDot {
		background: #e7e7e7;
	}

	.dot:last-child,
	.functionDot:last-child {
		margin: 0;
	}

	.dotActive,
	.functionDotActive {
		width: 36rpx;
		height: 12rpx;
		border-radius: 8rpx;
	}

	.dotActive {
		background: #f22b2b;
	}

	.functionDotActive {
		background: #c3c3c3;
	}

	.function {
		margin-top: 30rpx;
		font-size: 26rpx;
	}

	.functionSwiperItem {
		display: flex;
		flex-wrap: wrap;
	}

	.functionSwiper {
		width: 100%;
		height: 320rpx;
	}

	.functionItem {
		margin-bottom: 30rpx;
		width: calc(100% / 5);
		text-align: center;
	}

	.functionItem:nth-child(n + 6) {
		margin: 0;
	}

	.functionImg {
		margin-bottom: 10rpx;
		width: 90rpx;
		height: 90rpx;
		vertical-align: middle;
	}

	/* 底部布局 */
	.bottom {
		margin-top: 26rpx;
		padding: 0 26rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.decorateImg {
		width: 100%;
		height: 180rpx;
	}

	.decorateImg image {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}

	/* 分类 */
	.cateContainer {
		margin-top: 50rpx;
	}

	.scrollView {
		overflow: hidden;
		white-space: nowrap;
	}

	.cateItem {
		display: inline-block;
		margin-right: 40rpx;
		font-size: $uni-font-size-base;
	}

	.cateItem:last-child {
		margin: 0;
	}

	.cateActive {
		color: #f33632;
	}

	.main {
		padding-top: 30upx;
		box-sizing: border-box;
		background-color: #F5F6F7;

		.more_btn {
			width: 300upx;
			height: 50upx;
			text-align: center;
			margin: 20upx auto;
			font-size: $uni-font-size-sm;
			color: #FFFFFF;
			background-color: #FFA6A6;
			border-radius: 50upx;
			line-height: 50upx;
		}
	}
</style>
